<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: HTTP GET to request data</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: HTTP GET to request data</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style type="text/css" scoped>
#container li {margin-left:2em;}
#container { background-color:#FFFFFF; border:1px dotted #666666; padding:1em; margin-bottom:1em;}
</style>
<div class="intro">
<p>This example demonstrates how to send HTTP GET requests using <a href="http://developer.yahoo.com/yui/3/io/" title="YUI 3: IO">YUI 3's IO module</a>.  One transaction uses global event listeners to handle the transaction's lifecycle and response.  The other transaction uses both global and transaction-level events.</p>
</div>
<div class="example">
<div id="container">
    <ul>
        <li>IO GET response data will appear here.</li>
    </ul>
</div>
<form>
    <input id="get1" type="button" value="GET with Global Listeners. " />
    <input id="get2" type="button" value="GET with Global and Transaction Listeners" />
</form>

<script>
YUI().use("io-base", "node",

    function(Y) {

        //Get a reference to the DIV that we are using
        //to report results.
        var d = Y.one('#container'),
            gStr = '',
            tStr = '',
            state;

        /* global listener object */
        var gH = {
            write: function(s, args) {
                     gStr += "ID: " + s;
                     if (args) {
                        gStr += " " + "The globally-defined arguments are: " + args;
                     }
                     gStr += "<br>";
            },
            start: function(id) {
                     // When transaction listeners are handled, its user-defined arguments
                     // are accessible in the arguments collection.  The following detection
                     // logic determines whether the output should account for transaction
                     // arguments.
                     args = state === 'global' ? arguments[1] : arguments[2];
                     this.write(id + ": Global Event Start.", args);
            },
            complete: function(id, o) {
                     args = state === 'global' ? arguments[2] : arguments[3];
                     this.write(id + ": Global Event Complete.  The status code is: " + o.status + ".", args);
            },
            success: function(id, o) {
                      args = state === 'global' ? arguments[2] : arguments[3];
                      this.write(id + ": Global Event Success.  The response is: " + o.responseText + ".", args);
            },
            failure: function(id, o) {
                      args = state === 'global' ? arguments[2] : arguments[3];
                      this.write(o + ": Global Event Failure.  The status text is: " + o.statusText + ".", args);
            },
            end: function(id) {
                     args = state === 'global' ? arguments[1] : arguments[2];
                     this.write(id + ": Global Event End.", args);
                     if (state === 'global') {
                         flush(gStr);
                     }
            }
        };
        /* end global listener object */

        /* transaction event object */
        var tH = {
            write: function(s, args) {
                     tStr += "ID: " + s;
                     if (args) {
                        tStr += " " + "The arguments are: " + args;
                     }
                     tStr += "<br>";
                   },
            start: function(id, args) {
                     this.write(id + ": Transaction Event Start.", args.start);
                   },
            complete: function(id, o, args) {
                        this.write(id + ": Transaction Event Complete.  The status code is: " + o.status + ".", args.complete);
                   },
            success: function(id, o, args) {
                       this.write(id + ": Transaction Event Success.  The response is: " + o.responseText + ".", args.success);
                     },
            failure: function(id, o, args) {
                       this.write(id + ": Transaction Event Failure.  The status text is: " + o.statusText + ".", args.failure);
                     },
            end: function(id, args) {
                     this.write(id + ": Transaction Event End.", args.end);
                     flush(gStr + tStr);
            }
        };
        /* end transaction event object */

        /* Output the results to the DIV container */
        function flush(s) {
            d.set("innerHTML", s);
            if (state === 'global') {
                gStr = '';
            }
            else {
                gStr = '';
                tStr = '';
            }
        }

        /* attach global listeners */
        Y.on('io:start', gH.start, gH, 'global foo');
        Y.on('io:complete', gH.complete, gH, 'global bar');
        Y.on('io:success', gH.success, gH, 'global baz');
        Y.on('io:failure', gH.failure, gH);
        Y.on('io:end', gH.end, gH, 'global boo');
        /* end global listener binding */

        /* configuration object for transactions */
        var cfg = {
            on: {
                start: tH.start,
                complete: tH.complete,
                success: tH.success,
                failure: tH.failure,
                end: tH.end
            },
            context: tH,
            headers: { 'X-Transaction': 'GET Example'},
            arguments: {
                       start: 'foo',
                       complete: 'bar',
                       success: 'baz',
                       failure: 'Oh no!',
                       end: 'boo'
                       }
        };
        /* end configuration object */

        function call(e, b) {
            if (b) {
                state = 'all';
            }
            else {
                state = 'global';
            }

            Y.io('../assets/io/get.txt', cfg);
        }

        Y.on('click', call, "#get1", Y, false);
        Y.on('click', call, "#get2", Y, true);
    });
</script>

</div>

<h2 class="first">Using IO for HTTP GET Requests, and Handling the Response via Event Listeners.</h2>
<h3>Create a YUI Instance</h3>
<p>We create a YUI instance and use <code>io-base</code> for this example, since we only need to basic IO functionality:</p>

<pre class="code prettyprint">&#x2F;&#x2F;Create a YUI instance including support for IO:
YUI({ filter:&#x27;raw&#x27; }).use(&quot;io-base&quot;, &quot;node&quot;, function(Y) {
    &#x2F;&#x2F; Y is the YUI instance.
    &#x2F;&#x2F; The rest of the following code is encapsulated in this
    &#x2F;&#x2F; anonymous function.
} );</pre>


<h3>Create Handlers for Global and Transaction Events</h3>

<p>
We will create one object to handle the Global Events, and one object to handle Transaction Events.  Each object defines methods to handle the events in a transction's lifecycles.
The results are logged to <code>&lt;div id=&quot;container&quot;&gt;</code>.
</p>

<pre class="code prettyprint">&#x2F;&#x2F;Get a reference to the DIV that we are using
&#x2F;&#x2F;to report results.
var d = Y.one(&#x27;#container&#x27;),
    gStr = &#x27;&#x27;,
    tStr = &#x27;&#x27;,
    state;

&#x2F;* global listener object *&#x2F;
var gH = {
    write: function(s, args) {
             gStr += &quot;ID: &quot; + s;
             if (args) {
                gStr += &quot; &quot; + &quot;The arguments are: &quot; + args;
             }
             gStr += &quot;&lt;br&gt;&quot;;
           },
    start: function(id, args) {
             this.write(id + &quot;: Global Event Start.&quot;, args);
           },
    complete: function(id, o, args) {
                this.write(id + &quot;: Global Event Complete.  The status code is: &quot; + o.status + &quot;.&quot;, args);
           },
    success: function(id, o, args) {
               this.write(id + &quot;: Global Event Success.  The response is: &quot; + o.responseText + &quot;.&quot;, args);
             },
    failure: function(id, o, args) {
               this.write(o + &quot;: Global Event Failure.  The status text is: &quot; + o.statusText + &quot;.&quot;, args);
             },
    end: function(id, args) {
             this.write(id + &quot;: Global Event End.&quot;, args);
             if (state === &#x27;global&#x27;) {
                 flush(gStr);
             }
    }
};
&#x2F;* end global listener object *&#x2F;

&#x2F;* transaction event object *&#x2F;
var tH = {
    write: function(s, args) {
             tStr += &quot;ID: &quot; + s;
             if (args) {
                tStr += &quot; &quot; + &quot;The arguments are: &quot; + args;
             }
             tStr += &quot;&lt;br&gt;&quot;;
           },
    start: function(id, args) {
             this.write(id + &quot;: Transaction Event Start.&quot;, args.start);
           },
    complete: function(id, o, args) {
                this.write(id + &quot;: Transaction Event Complete.  The status code is: &quot; + o.status + &quot;.&quot;, args.complete);
           },
    success: function(id, o, args) {
               this.write(id + &quot;: Transaction Event Success.  The response is: &quot; + o.responseText + &quot;.&quot;, args.success);
             },
    failure: function(id, o, args) {
               this.write(id + &quot;: Transaction Event Failure.  The status text is: &quot; + o.statusText + &quot;.&quot;, args.failure);
             },
    end: function(id, args) {
             this.write(id + &quot;: Transaction Event End.&quot;, args.end);
             flush(gStr + tStr);
    }
};
&#x2F;* end transaction event object *&#x2F;

&#x2F;* Output the results to the DIV container *&#x2F;
function flush(s) {
    d.set(&quot;innerHTML&quot;, s);

    if (state === &#x27;global&#x27;) {
        gStr = &#x27;&#x27;;
    }
    else {
        gStr = &#x27;&#x27;;
        tStr = &#x27;&#x27;;
    }
}</pre>


<h3>Subscribe to the Global events</h3>
<p>With the handler object <code>gH</code defined, we can now subscribe to the Global events.</p>

<pre class="code prettyprint">&#x2F;&#x2F; Notice the object context of &quot;gH&quot; is provided as the
&#x2F;&#x2F; third argument of &lt;code&gt;Y.on()&lt;&#x2F;code&gt;, to preserve the proper
&#x2F;&#x2F; context of &#x27;this&#x27; as used in &lt;code&gt;gH&#x27;s&lt;&#x2F;code&gt; methods.

&#x2F;* Subscribe to the global events *&#x2F;
Y.on(&#x27;io:start&#x27;, gH.start, gH, &#x27;global foo&#x27;);
Y.on(&#x27;io:complete&#x27;, gH.complete, gH, &#x27;global bar&#x27;);
Y.on(&#x27;io:success&#x27;, gH.success, gH, &#x27;global baz&#x27;);
Y.on(&#x27;io:failure&#x27;, gH.failure, gH);
Y.on(&#x27;io:end&#x27;, gH.end, gH, &#x27;global boo&#x27;);
&#x2F;* End event subscription *&#x2F;</pre>


<h3>Assemble a Configuration Object to set Transaction Event Listeners</h3>
<p>Use a configuration object to define which Transaction Events you wish to handle, for the specific transaction.</p>

<pre class="code prettyprint">&#x2F;* Configuration object for setting Transaction Events *&#x2F;
var cfg = {
    on: {
        start: tH.start,
        complete: tH.complete,
        success: tH.success,
        failure: tH.failure,
        end: tH.end
    },
    context: tH,
    arguments: {
               start: &#x27;foo&#x27;,
               complete: &#x27;bar&#x27;,
               success: &#x27;baz&#x27;,
               failure: &#x27;Oh no!&#x27;,
               end: &#x27;boo&#x27;
               }
};</pre>


<h3>Initiate the Transaction</h3>
<p>
Finally, we set up two buttons -- one for each type of transaction -- and add a "click" listener to each of them.  The handler -- function <code>call()</code> -- make an
IO request, based on which button was clicked.
</p>

<pre class="code prettyprint">function call(e, b) {
    if (b) {
        state = &#x27;all&#x27;;
    }
    else {
        state = &#x27;global&#x27;;
    }

    Y.io(&#x27;..&#x2F;assets&#x2F;io&#x2F;get.txt&#x27;, cfg);
}

Y.on(&#x27;click&#x27;, call, &quot;#get1&quot;, this, false);
Y.on(&#x27;click&#x27;, call, &quot;#get2&quot;, this, true);</pre>


<h4>Full Code</h4>

<p>The full JavaScript code for this example follows:</p>

<pre class="code prettyprint">&lt;div id=&quot;container&quot;&gt;
    &lt;ul&gt;
        &lt;li&gt;IO GET response data will appear here.&lt;&#x2F;li&gt;
    &lt;&#x2F;ul&gt;
&lt;&#x2F;div&gt;
&lt;form&gt;
    &lt;input id=&quot;get1&quot; type=&quot;button&quot; value=&quot;GET with Global Listeners. &quot; &#x2F;&gt;
    &lt;input id=&quot;get2&quot; type=&quot;button&quot; value=&quot;GET with Global and Transaction Listeners&quot; &#x2F;&gt;
&lt;&#x2F;form&gt;

&lt;script&gt;
YUI().use(&quot;io-base&quot;, &quot;node&quot;,

    function(Y) {

        &#x2F;&#x2F;Get a reference to the DIV that we are using
        &#x2F;&#x2F;to report results.
        var d = Y.one(&#x27;#container&#x27;),
            gStr = &#x27;&#x27;,
            tStr = &#x27;&#x27;,
            state;

        &#x2F;* global listener object *&#x2F;
        var gH = {
            write: function(s, args) {
                     gStr += &quot;ID: &quot; + s;
                     if (args) {
                        gStr += &quot; &quot; + &quot;The globally-defined arguments are: &quot; + args;
                     }
                     gStr += &quot;&lt;br&gt;&quot;;
            },
            start: function(id) {
                     &#x2F;&#x2F; When transaction listeners are handled, its user-defined arguments
                     &#x2F;&#x2F; are accessible in the arguments collection.  The following detection
                     &#x2F;&#x2F; logic determines whether the output should account for transaction
                     &#x2F;&#x2F; arguments.
                     args = state === &#x27;global&#x27; ? arguments[1] : arguments[2];
                     this.write(id + &quot;: Global Event Start.&quot;, args);
            },
            complete: function(id, o) {
                     args = state === &#x27;global&#x27; ? arguments[2] : arguments[3];
                     this.write(id + &quot;: Global Event Complete.  The status code is: &quot; + o.status + &quot;.&quot;, args);
            },
            success: function(id, o) {
                      args = state === &#x27;global&#x27; ? arguments[2] : arguments[3];
                      this.write(id + &quot;: Global Event Success.  The response is: &quot; + o.responseText + &quot;.&quot;, args);
            },
            failure: function(id, o) {
                      args = state === &#x27;global&#x27; ? arguments[2] : arguments[3];
                      this.write(o + &quot;: Global Event Failure.  The status text is: &quot; + o.statusText + &quot;.&quot;, args);
            },
            end: function(id) {
                     args = state === &#x27;global&#x27; ? arguments[1] : arguments[2];
                     this.write(id + &quot;: Global Event End.&quot;, args);
                     if (state === &#x27;global&#x27;) {
                         flush(gStr);
                     }
            }
        };
        &#x2F;* end global listener object *&#x2F;

        &#x2F;* transaction event object *&#x2F;
        var tH = {
            write: function(s, args) {
                     tStr += &quot;ID: &quot; + s;
                     if (args) {
                        tStr += &quot; &quot; + &quot;The arguments are: &quot; + args;
                     }
                     tStr += &quot;&lt;br&gt;&quot;;
                   },
            start: function(id, args) {
                     this.write(id + &quot;: Transaction Event Start.&quot;, args.start);
                   },
            complete: function(id, o, args) {
                        this.write(id + &quot;: Transaction Event Complete.  The status code is: &quot; + o.status + &quot;.&quot;, args.complete);
                   },
            success: function(id, o, args) {
                       this.write(id + &quot;: Transaction Event Success.  The response is: &quot; + o.responseText + &quot;.&quot;, args.success);
                     },
            failure: function(id, o, args) {
                       this.write(id + &quot;: Transaction Event Failure.  The status text is: &quot; + o.statusText + &quot;.&quot;, args.failure);
                     },
            end: function(id, args) {
                     this.write(id + &quot;: Transaction Event End.&quot;, args.end);
                     flush(gStr + tStr);
            }
        };
        &#x2F;* end transaction event object *&#x2F;

        &#x2F;* Output the results to the DIV container *&#x2F;
        function flush(s) {
            d.set(&quot;innerHTML&quot;, s);
            if (state === &#x27;global&#x27;) {
                gStr = &#x27;&#x27;;
            }
            else {
                gStr = &#x27;&#x27;;
                tStr = &#x27;&#x27;;
            }
        }

        &#x2F;* attach global listeners *&#x2F;
        Y.on(&#x27;io:start&#x27;, gH.start, gH, &#x27;global foo&#x27;);
        Y.on(&#x27;io:complete&#x27;, gH.complete, gH, &#x27;global bar&#x27;);
        Y.on(&#x27;io:success&#x27;, gH.success, gH, &#x27;global baz&#x27;);
        Y.on(&#x27;io:failure&#x27;, gH.failure, gH);
        Y.on(&#x27;io:end&#x27;, gH.end, gH, &#x27;global boo&#x27;);
        &#x2F;* end global listener binding *&#x2F;

        &#x2F;* configuration object for transactions *&#x2F;
        var cfg = {
            on: {
                start: tH.start,
                complete: tH.complete,
                success: tH.success,
                failure: tH.failure,
                end: tH.end
            },
            context: tH,
            headers: { &#x27;X-Transaction&#x27;: &#x27;GET Example&#x27;},
            arguments: {
                       start: &#x27;foo&#x27;,
                       complete: &#x27;bar&#x27;,
                       success: &#x27;baz&#x27;,
                       failure: &#x27;Oh no!&#x27;,
                       end: &#x27;boo&#x27;
                       }
        };
        &#x2F;* end configuration object *&#x2F;

        function call(e, b) {
            if (b) {
                state = &#x27;all&#x27;;
            }
            else {
                state = &#x27;global&#x27;;
            }

            Y.io(&#x27;..&#x2F;assets&#x2F;io&#x2F;get.txt&#x27;, cfg);
        }

        Y.on(&#x27;click&#x27;, call, &quot;#get1&quot;, Y, false);
        Y.on(&#x27;click&#x27;, call, &quot;#get2&quot;, Y, true);
    });
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Use IO to request data over HTTP.">
                                        <a href="get.html">HTTP GET to request data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use IO to request XML data from a remote web service.">
                                        <a href="weather.html">Request XML data from Yahoo! Weather</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources.">
                                        <a href="xdr.html">Request JSON using Yahoo! Pipes</a>
                                    </li>
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Shows how to create a simple plugin to retrieve content for the Overlay using the io utility.">
                                        <a href="../overlay/overlay-io-plugin.html">IO Plugin</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
